import { FormField, FormList } from "solid-form-context";
import { FaSolidPlus, FaSolidTrash } from "solid-icons/fa";
import { Index } from "solid-js";
import { FormInputText } from "~/components/form";
import { FormJsonEdit } from "./JsonEdit";

export default (props: { isCreate?: boolean }) => {
  return (
    <>
      <FormField name={"name"}>
        <fieldset class="d-fieldset mb-3">
          <legend class="d-fieldset-legend mb-1">服务名称</legend>
          <FormInputText class="d-input w-full" />
        </fieldset>
      </FormField>

      <FormField name={"matchPath"}>
        <fieldset class="d-fieldset mb-3">
          <legend class="d-fieldset-legend mb-1">匹配路径</legend>
          <FormInputText class="d-input w-full" />
        </fieldset>
      </FormField>

      <FormList name="hosts">
        {(fields, actions) => {
          return (
            <fieldset class="d-fieldset mb-3">
              <legend class="d-fieldset-legend mb-1">
                Hosts
                <button
                  type="button"
                  class="d-btn d-btn-xs ms-1 d-btn-ghost d-btn-circle"
                  onClick={() => actions.add("")}
                >
                  <FaSolidPlus />
                </button>
              </legend>
              <div class="flex flex-1 flex-col">
                <Index each={fields()}>
                  {(fieldProps, index) => (
                    <FormField {...fieldProps()}>
                      <label class=" d-input w-full pe-2">
                        <FormInputText />
                        <button
                          type="button"
                          class="d-btn d-btn-xs d-btn-warning d-btn-ghost d-btn-circle"
                          onClick={() => actions.remove(index)}
                        >
                          <FaSolidTrash />
                        </button>
                      </label>
                    </FormField>
                  )}
                </Index>
              </div>
            </fieldset>
          );
        }}
      </FormList>

      <FormList name="methods">
        {(fields, actions) => {
          return (
            <fieldset class="d-fieldset mb-3">
              <legend class="d-fieldset-legend mb-1">
                Methods
                <button
                  type="button"
                  class="d-btn d-btn-xs ms-1 d-btn-ghost d-btn-circle"
                  onClick={() => actions.add()}
                >
                  <FaSolidPlus />
                </button>
              </legend>
              <div class="flex flex-1 flex-col">
                <Index each={fields()}>
                  {(fieldProps, index) => (
                    <FormField {...fieldProps()}>
                      <label class=" d-input w-full pe-2">
                        <FormInputText />
                        <button
                          type="button"
                          class="d-btn d-btn-xs d-btn-warning d-btn-ghost d-btn-circle"
                          onClick={() => actions.remove(index)}
                        >
                          <FaSolidTrash />
                        </button>
                      </label>
                    </FormField>
                  )}
                </Index>
              </div>
            </fieldset>
          );
        }}
      </FormList>

      <FormList name="endpoints">
        {(fields, actions) => {
          return (
            <fieldset class="d-fieldset mb-3">
              <legend class="d-fieldset-legend mb-1">
                Endpoints
                <button
                  type="button"
                  class="d-btn d-btn-xs ms-1 d-btn-ghost d-btn-circle"
                  onClick={() => actions.add()}
                >
                  <FaSolidPlus />
                </button>
              </legend>
              <div class="flex flex-1 flex-col">
                <Index each={fields()}>
                  {(fieldProps, index) => (
                    <FormField {...fieldProps()}>
                      <label class=" d-input w-full pe-2">
                        <FormInputText />
                        <button
                          type="button"
                          class="d-btn d-btn-xs d-btn-warning d-btn-ghost d-btn-circle"
                          onClick={() => actions.remove(index)}
                        >
                          <FaSolidTrash />
                        </button>
                      </label>
                    </FormField>
                  )}
                </Index>
              </div>
            </fieldset>
          );
        }}
      </FormList>

      <FormField name={"routeOverwrite"}>
        <fieldset class="d-fieldset mb-3">
          <legend class="d-fieldset-legend mb-1">Overwrite</legend>
          <FormJsonEdit rows={10} class="d-textarea w-full" />
        </fieldset>
      </FormField>
    </>
  );
};
